<template>
  <el-dialog
    :visible="visible"
    center
    :before-close="beforeClose"
    width="520px"
    :close-on-click-modal="false"
    top="35vh"
    :append-to-body="true"
  >
    <div class="content jc-center ai-center d-flex">
      {{text}}
    </div>
    <span
      slot="footer"
      class="dialog-footer ai-center jc-evenly"
    >
      <div
        class="btn btn-one-click-pass"
        @click="submit"
      >{{submitText}}</div>
      <div class="btn btn-pass" @click="cancel">{{cancelText}}</div>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    text:{
      type:String,
      default:'是否确认通过审批？'
    },
    submitText:{
      type:String,
      default:'确认通过'
    },
    cancelText:{
      type:String,
      default:'取消'
    }
  },
  methods: {
    beforeClose(done) {
      this.$emit("update:visible", false);
      done();
    },
    submit() {
      this.$emit("onSubmit");
    },
    cancel() {
      this.$emit("update:visible", false);
    }
  },
};
</script>

<style lang="less" scoped>
.content {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  text-align: center;
  font-weight: 400;
}
.dialog-footer {
  display: flex;
  .btn {
    border-radius: 10px;
    width: 106px;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    user-select: none;
    &-one-click-pass {
      background: #74d8f1;
      color: #fff;
      &:hover {
        background: #74d8f1dd;
      }
      &:active {
        background: #4fc7e5;
      }
    }
    &-pass {
      background: #d4eef4;
      color: #19a6e1;
      &:hover {
        background: #d4eef4dd;
      }
      &:active {
        background: #a8dfeb;
      }
    }
  }
}
</style>